<template>
  <div style="margin-bottom:5px;">
    <div>
      <div class="left-col">{{ name }}</div>
      <div class="right-col filter-list-wrapper">
        <ul class="filter-list">
          <li
            class="filter-all"
            v-if="!hideAll"
            :class="{ selected: value.length === 0 }"
            @click="onSelect()"
          >
            全部
          </li>
          <li
            v-for="(item, index) in limitList"
            :key="index"
            :class="{ selected: selectedObj[item.value] }"
            @click="onSelect(item)"
          >
            {{ item.label }}
          </li>
          <li
            v-if="checkOptions.length > 0"
            class="filter-more"
            :class="{ 'more-selected': checkCount > 0 }"
            v-popover:popover
          >
            <span
              >更多 <em v-if="checkCount">({{ checkCount }})</em
              ><i class="el-icon-d-arrow-left" :class="{ rotate: show }"></i>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <el-popover
      ref="popover"
      v-model="show"
      popper-class="multi-filter-popover"
      placement="bottom"
      trigger="click"
    >
      <el-checkbox
        size="medium"
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <el-checkbox-group size="medium" v-model="checkList" @change="handleCheckedChange">
        <el-checkbox
          size="medium"
          v-for="item in checkOptions"
          :label="item.value"
          :key="item.value"
          >{{ item.label }}</el-checkbox
        >
      </el-checkbox-group>
    </el-popover>
  </div>
</template>
<script>
export default {
  props: ['name', 'list', 'value', 'hideAll', 'limitCount'],
  data() {
    return {
      selectedObj: {},
      checkAll: false,
      checkList: [],
      isIndeterminate: false,
      checkedObj: {},
      show: false
    };
  },
  mounted() {
    this.setDefaultSelected();
  },
  watch: {
    value() {
      this.setDefaultSelected();
    }
  },
  computed: {
    limitList() {
      return this.list.slice(0, this.limitCount);
    },
    checkOptions() {
      return this.list.slice(this.limitCount || this.list.length);
    },
    checkCount() {
      return Object.keys(this.checkedObj).length;
    }
  },
  methods: {
    setDefaultSelected() {
      this.selectedObj = {};
      (this.value || []).forEach(key => {
        this.selectedObj[key] = true;
      });
    },
    handleCheckAllChange(checked) {
      this.checkList = checked
        ? this.checkOptions.map(item => {
            return item.value;
          })
        : [];
      this.handleCheckedChange(this.checkList);
    },
    handleCheckedChange(value) {
      this.isIndeterminate = value.length > 0 && value.length < this.checkOptions.length;
      this.checkAll = value.length > 0 && value.length === this.checkOptions.length;
      this.checkedObj = {};
      value.forEach(item => {
        this.checkedObj[item] = true;
      });
      this.checkOptions.forEach(item => {
        let index = this.value.indexOf(item.value);
        if (this.checkedObj[item.value] && index === -1) {
          this.value.push(item.value);
        } else if (!this.checkedObj[item.value] && index > -1) {
          this.value.splice(index, 1);
        }
      });
      console.log('filter', this.name, this.value);
      this.$emit('onChange');
    },
    onSelect(item) {
      if (!item) {
        this.value.splice(0);
        this.selectedObj = {};
        this.checkedObj = {};
        this.checkAll = false;
        this.isIndeterminate = false;
        this.checkList = [];
      } else {
        if (this.selectedObj[item.value]) {
          let index = this.value.indexOf(item.value);
          this.value.splice(index, 1);
        } else {
          this.value.push(item.value);
        }
        this.selectedObj[item.value] = !this.selectedObj[item.value];
      }
      console.log('filter', this.name, this.value);
      this.$emit('onChange');
    }
  }
};
</script>
<style>
.multi-filter-popover .el-checkbox {
  display: block;
  padding: 3px 0;
}
</style>
